<template>
<div :class="[$style.container]">
  <el-tooltip content="设置">
    <span :class="[$style.icon]" @click="open"><svg-icon icon="setting"></svg-icon></span>
  </el-tooltip>
  <el-dialog title="客户端设置" :visible.sync="actualVisible" width="640px"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <el-tabs tab-position="left" v-model="tab" style="height: 320px;" v-if="actualVisible">
      <el-tab-pane label="启动设置" name="launch"> <launch-setting></launch-setting> </el-tab-pane>
      <el-tab-pane label="服务器设置" name="server"> <server-setting></server-setting> </el-tab-pane>
    </el-tabs>
  </el-dialog>
</div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import { ModalMixins } from '@/mixins'
import { mixins } from 'vue-class-component'
import LaunchSetting from './launch-setting/index.vue'
import ServerSetting from './server-setting/index.vue'

@Component({
  components: { LaunchSetting, ServerSetting }
})
export default class AppSetting extends mixins(ModalMixins) {
  @Ref() fm!: any

  tab = 'launch'

  open () {
    this.tab = 'launch'
    return this.init()
  }

  onCancel () {
    this.cancel()
  }

  onConfirm () {
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.icon {
  font-size: 20px;
  &:hover {
    color: $color-primary;
    cursor: pointer;
  }
}
</style>
